<template>
  <div id="centerLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-bar" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">学科分布</span>
          <!--          <dv-decoration-3 class="dv-dec-3" />-->
        </div>
      </div>

      <div class="chart-and-data">
        <div class="d-flex jc-center chart-container">
          <!-- 传递转换后的数据给 Chart 组件 -->
          <Chart :riskLevels="riskLevels" />
        </div>

        <!--        <div class="bottom-data">-->
        <!--          <div class="item-box" v-for="(item, index) in riskLevels" :key="index">-->
        <!--            <p class="text">-->
        <!--              {{ item.text }} <span class="colorYellow">{{ item.number.number[0] }}</span> 篇-->
        <!--            </p>-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import Chart from '@/components/echart/centerLeft/centerLeft1Chart/index.vue'
import { mapActions } from "vuex";
import * as XLSX from 'xlsx';
import xlsxFile from '../assets/data/data.xlsx'; // 通过 webpack 引入

export default {
  data() {
    return {
      userData: {
        id: ''
      },
      // 原固定数据注释保留
      // riskLevels: [
      //   { text: '物理', number: { number: [2655] } },
      //   { text: '生命科学', number: { number: [1933] } },
      //   { text: '地球科学', number: { number: [1387] } },
      //   { text: '化学', number: { number: [1311] } },
      //   { text: '材料科学', number: { number: [1045] } },
      //   { text: '环境科学', number: { number: [888] } },
      //   { text: '数学', number: { number: [1091] } },
      //   { text: '能源科学', number: { number: [973] } },
      //   { text: '环境航天', number: { number: [104] } },
      //   { text: '天文', number: { number: [77] } },
      //   { text: '核科学', number: { number: [43] } }
      // ],
      riskLevels: []
    }
  },
  mounted() {
    this.userData.id = this.$store.state.user.userInfo.id;
    console.log(this.userData.id, 'userData.id');
    console.log('centerLeft1 mounted');
    this.init();
  },
  computed: {
    cdata() {
      return {
        xData: this.riskLevels.map(item => item.text),
        seriesData: this.riskLevels.map(item => ({
          value: item.number.number[0],
          name: item.text
        }))
      }
    }
  },
  methods: {
    ...mapActions(['countRiskLevel']),
    async init() {
      try {
        const response = await fetch(xlsxFile);
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

        const arrayBuffer = await response.arrayBuffer();
        const workbook = XLSX.read(arrayBuffer, { type: 'array' });

        const sheetName = '学科分布';
        const worksheet = workbook.Sheets[sheetName];
        if (!worksheet) throw new Error('找不到工作表: 学科分布');

        const data = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        // 假设第一行是表头，从第二行开始加载数据
        for (let i = 1; i < data.length; i++) {
          this.riskLevels.push({
            text: data[i][0],
            number: { number: [data[i][1]] }
          });
        }
      } catch (error) {
        console.error('读取文件时出错:', error);
      }
    }
  },
  components: {
    Chart
  }
}
</script>


<style lang="scss" scoped>
$box-width: 510px;
$box-height: 250px;

#centerLeft1 {
  padding: 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 10px;

  .bg-color-black {
    height: $box-height;
    border-radius: 10px;
  }

  .text {
    color: #c3cbde;
    font-size: 20px;
  }

  .dv-dec-3 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }

  .chart-and-data {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .chart-container {
    flex: 1;
  }

  .bottom-data {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    .item-box {
      display: flex;
      flex-direction: row;
      font-size: 16px;
      color: #d3d6dd;
      margin-bottom: 8px;

      .colorYellow {
        color: yellowgreen;
        font-weight: bold;
      }
    }
  }
}
</style>
